import React from 'react'
import CustomTable from '@/components/table'
import Star from '@/components/star'
import { tableDb } from './data'
import { dateSort, stringSort, percentSort } from '@/utils'
import styles from './style.module.less'
import { values } from 'lodash'
class PlaceHolder extends React.Component {
  state = {
    tableList: tableDb,
    UI_TRUE_FALSE: true
  }
  render() {
    const { tableList } = this.state
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        sortable: false,
        fixed: 'left',
        width: 43
      },
      {
        title: '日期',
        dataIndex: 'date',
        align: 'center',
        sorter: dateSort('date'),
        ellipsis: true, // 大小屏幕标题自动换行显示
        fixed: 'left',
        width: 100
      },
      {
        title: '基金代码 ',
        dataIndex: 'fundCode',
        width: 81,
        sortType: 'string',
        align: 'left',
        render: (text, record) => (
          <div>
            {!text ? (
              '-'
            ) : (
              <a href={`/fundResearch/manaDi?id=${record.personalCode}&tab=tab2`}>{text}</a>
            )}
          </div>
        )
      },
      {
        title: '基金名称',
        dataIndex: 'fundAbbrName',
        width: 140,
        align: 'center',
        sorter: stringSort('fundAbbrName')
      },
      ...(!this.state.UI_TRUE_FALSE
        ? []
        : [
            {
              title: '研究评级',
              dataIndex: 'grade',
              align: 'center',
              width: 200,
              sortType: 'string',
              render: (value) => <Star value={value} />
            }
          ]),
      {
        title: '日回报%',
        dataIndex: 'dailyYieldString',
        sorter: percentSort('dailyYieldString'),
        // sortType: 'percent',
        align: 'right',
        render: (value) => Number(value)
      },
      {
        title: '月回报%',
        dataIndex: 'monthYieldString',
        align: 'right'
      },
      {
        title: 'YTD%',
        dataIndex: 'ytdString',
        align: 'right'
      }
    ]
    return (
      <div className={styles.container}>
        <CustomTable
          pagination={false}
          rowKey={(record) => record.fundCode}
          columns={columns}
          dataSource={tableList}
        />
      </div>
    )
  }
}

export default PlaceHolder
